<template>
  <div class="disaster-detail-window">
    <!-- 上部分：灾害类型动效标签 -->
    <div class="disaster-header" :class="`disaster-type-${getTypeClass(disaster.disasterType)}`">
      <div class="disaster-badge">
        <div class="badge-icon">
          <component :is="getDisasterIcon(disaster.disasterType)" />
        </div>
        <div class="badge-content">
          <div class="disaster-type">{{ getDisasterTypeName(disaster.disasterType) }}</div>
          <div class="disaster-level">{{ disaster.level || '一般' }} 级别</div>
        </div>
      </div>
      
      <div class="disaster-animation">
        <div v-if="getTypeClass(disaster.disasterType) === 'landslid'" class="landslid-animation">
          <div v-for="i in 8" :key="i" class="rock"></div>
        </div>
        <div v-else-if="getTypeClass(disaster.disasterType) === 'roadflooding'" class="flood-animation">
          <div v-for="i in 5" :key="i" class="wave"></div>
        </div>
        <div v-else-if="getTypeClass(disaster.disasterType) === 'waterbody'" class="waterbody-animation">
          <div v-for="i in 5" :key="i" class="water-drop"></div>
        </div>
        <div v-else-if="getTypeClass(disaster.disasterType) === 'road_collapse'" class="collapse-animation">
          <div v-for="i in 4" :key="i" class="crack"></div>
        </div>
        <div v-else-if="getTypeClass(disaster.disasterType) === 'road_frozing'" class="frozing-animation">
          <div v-for="i in 6" :key="i" class="snowflake"></div>
        </div>
        <!-- 其他类型的动画可以继续添加 -->
      </div>
      
      <button class="close-btn" @click="$emit('close')">×</button>
    </div>
    
    <!-- 中间部分：灾害图片和位置 -->
    <div class="disaster-image-container" @click="showImagePreview = true">
      <img 
        :src="getDisasterImage()" 
        alt="灾害照片" 
        class="disaster-image"
      />
      <div class="disaster-overlay">
        <div class="disaster-date">发生时间: {{ formatDate(disaster.date || new Date()) }}</div>
        <div class="disaster-location">
          <Location />
          <span v-if="loading">正在获取位置...</span>
          <span v-else>位置：{{ locationText }}</span>
        </div>
      </div>
    </div>
    
    <!-- 下部分：灾害详情 -->
    <div class="disaster-details">
      <h3>灾害详情</h3>
      <p class="disaster-info">{{ disaster.disasterInfo || '暂无详细描述' }}</p>
      
      <div class="disaster-metadata">
        <div class="metadata-item">
          <span class="label">报告用户:</span>
          <span class="value">{{ reporterName }}</span>
        </div>
        <div class="metadata-item">
          <span class="label">验证状态:</span>
          <span class="value" :class="`status-${disaster.status}`">
            {{ getStatusText(disaster.status) }}
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- 使用 Teleport 将图片预览模态框传送到 body -->
  <teleport to="body">
    <div v-if="showImagePreview" class="image-preview-overlay" @click="showImagePreview = false">
      <div class="image-preview-container" @click.stop>
        <img :src="getDisasterImage()" alt="灾害照片" class="preview-image" />
        <button class="close-preview-btn" @click="showImagePreview = false">×</button>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch } from 'vue';
import MapUtils from '@/utils/Map/MapUtils';
import { Location } from "@element-plus/icons-vue";
import { 
  Mountain, 
  Waves, 
  Droplet, 
  Road as RoadIcon, 
  Snowflake, 
  AlertTriangle 
} from 'lucide-vue-next';
import { UserProfileApi } from '@/api/new/userProfleApi.js';

// 添加图片预览状态
const showImagePreview = ref(false);

// 灾害类型映射表
const hazardTypeMap = {
  'landslid': '山体滑坡',
  'roadflooding': '内涝',
  'waterbody': '水体',
  'road_collapse': '路面塌陷',
  'road_frozing': '路面结冰'
};

// 地址信息，初始状态为加载中
const locationText = ref('正在获取位置信息...');
const loading = ref(true);
const reporterName = ref(''); // 添加报告用户名

// 接收灾害数据作为prop
const props = defineProps({
  disaster: {
    type: Object,
    required: true
  }
});

// 发出关闭事件
const emit = defineEmits(['close']);

// 获取详细地址信息
const fetchDetailedLocation = async () => {
  if (props.disaster && props.disaster.longitude && props.disaster.latitude) {
    try {
      loading.value = true;
      // 获取完整的地址信息
      const addressInfo = await MapUtils.getAddressByLocation(
        props.disaster.longitude, 
        props.disaster.latitude
      );
      
      // 直接使用高德返回的格式化地址，这通常是最完整和用户友好的
      locationText.value = addressInfo.formattedAddress || '未知位置';
    } catch (error) {
      console.error('获取地址信息失败:', error);
      locationText.value = '位置信息获取失败';
    } finally {
      loading.value = false;
    }
  } else {
    locationText.value = '未提供位置信息';
    loading.value = false;
  }
};

// 获取用户信息
const fetchUserInfo = async () => {
  if (props.disaster && props.disaster.userID) {
    try {
      const userData = await UserProfileApi.getUserInfo(props.disaster.userID);
      reporterName.value = userData.username || '未知用户';
    } catch (error) {
      console.error('获取用户信息失败:', error);
      reporterName.value = '未知用户';
    }
  } else {
    reporterName.value = '未知用户';
  }
};

// 更新所有信息
const updateAllInfo = () => {
  fetchDetailedLocation();
  fetchUserInfo();
};

onMounted(() => {
  updateAllInfo();
});

// 监听灾害数据变化，当灾害改变时重新获取信息
watch(() => props.disaster, (newDisaster, oldDisaster) => {
  if (newDisaster && (!oldDisaster || newDisaster.disasterID !== oldDisaster.disasterID)) {
    updateAllInfo();
  }
}, { deep: true });

// 获取灾害类型的中文名称
const getDisasterTypeName = (type) => {
  return hazardTypeMap[type] || type;
};

// 根据灾害类型获取对应的CSS类名
const getTypeClass = (type) => {
  const typeMap = {
    'landslid': 'landslid',
    'roadflooding': 'roadflooding',
    'waterbody': 'waterbody',
    'road_collapse': 'road_collapse',
    'road_frozing': 'road_frozing'
  };
  return typeMap[type] || 'default';
};

// 根据灾害类型获取对应的图标组件
const getDisasterIcon = (type) => {
  const iconMap = {
    'landslid': Mountain,
    'roadflooding': Waves,
    'waterbody': Droplet,
    'road_collapse': AlertTriangle,
    'road_frozing': Snowflake
  };
  return iconMap[type] || AlertTriangle;
};

// 格式化日期
const formatDate = (date) => {
  if (typeof date === 'string') {
    date = new Date(date);
  }
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取灾害图片
const getDisasterImage = () => {
  // 如果有 video_url 字段并且非空，则使用它
  if (props.disaster.video_url) {
    return props.disaster.video_url;
  }
  
  // 否则使用默认图片映射
  const typeImageMap = {
    'landslid': 'https://img.freepik.com/free-photo/mountain-landslide-that-destroyed-road_1150-21710.jpg',
    'roadflooding': 'https://img.freepik.com/free-photo/city-floods-concept_23-2149888762.jpg',
    'waterbody': 'https://img.freepik.com/free-photo/beautiful-shot-small-lake-with-wooden-dock_181624-24903.jpg',
    'road_collapse': 'https://img.freepik.com/free-photo/crack-asphalt-road-after-earthquake_1150-17886.jpg',
    'road_frozing': 'https://img.freepik.com/free-photo/beautiful-shot-road-covered-with-snow-forest_181624-32130.jpg'
  };
  return typeImageMap[props.disaster.disasterType] || 'https://img.freepik.com/free-photo/warning-sign-natural-disaster-area_53876-139235.jpg';
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'verified': '已验证',
    'unverified': '待验证',
    'false': '已排除',
    'handled': '已处理'
  };
  return statusMap[status] || '未知状态';
};

// 根据灾害等级获取标签类型
const getTagType = (level) => {
  switch (level) {
    case '严重':
      return 'danger';
    case '中等':
      return 'warning';
    case '轻微':
      return 'info';
    default:
      return '';
  }
};
</script>

<style lang="less" scoped>
.disaster-detail-window {
  user-select: none;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  
  .disaster-header {
    position: relative;
    padding: 15px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    &.disaster-type-landslid {
      background: linear-gradient(135deg, #d35400, #e67e22);
    }
    
    &.disaster-type-roadflooding {
      background: linear-gradient(135deg, #2980b9, #3498db);
    }
    
    &.disaster-type-waterbody {
      background: linear-gradient(135deg, #1abc9c, #16a085);
    }
    
    &.disaster-type-road_collapse {
      background: linear-gradient(135deg, #8e44ad, #9b59b6);
    }
    
    &.disaster-type-road_frozing {
      background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    }
    
    &.disaster-type-default {
      background: linear-gradient(135deg, #34495e, #2c3e50);
    }
    
    .disaster-badge {
      display: flex;
      align-items: center;
      z-index: 2;
      
      .badge-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
      }
      
      .badge-content {
        .disaster-type {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 4px;
        }
        
        .disaster-level {
          font-size: 12px;
          opacity: 0.8;
        }
      }
    }
    
    .disaster-animation {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 1;
      
      .landslid-animation {
        width: 100%;
        height: 100%;
        
        .rock {
          position: absolute;
          width: 10px;
          height: 10px;
          background: rgba(255, 255, 255, 0.6);
          border-radius: 50%;
          animation: rockfall 3s infinite;
          
          &:nth-child(1) { left: 10%; animation-delay: 0.2s; width: 7px; height: 7px; }
          &:nth-child(2) { left: 20%; animation-delay: 0.4s; width: 9px; height: 9px; }
          &:nth-child(3) { left: 30%; animation-delay: 0.6s; width: 11px; height: 11px; }
          &:nth-child(4) { left: 40%; animation-delay: 0.8s; width: 13px; height: 13px; }
          &:nth-child(5) { left: 50%; animation-delay: 1.0s; width: 15px; height: 15px; }
          &:nth-child(6) { left: 60%; animation-delay: 1.2s; width: 17px; height: 17px; }
          &:nth-child(7) { left: 70%; animation-delay: 1.4s; width: 19px; height: 19px; }
          &:nth-child(8) { left: 80%; animation-delay: 1.6s; width: 21px; height: 21px; }
        }
      }
      
      .flood-animation {
        width: 100%;
        height: 100%;
        
        .wave {
          position: absolute;
          bottom: 0;
          height: 20px;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 50% 50% 0 0;
          animation: wave 2s infinite ease-in-out;
          
          &:nth-child(1) { left: 0%; width: 20%; animation-delay: 0.2s; }
          &:nth-child(2) { left: 20%; width: 20%; animation-delay: 0.4s; }
          &:nth-child(3) { left: 40%; width: 20%; animation-delay: 0.6s; }
          &:nth-child(4) { left: 60%; width: 20%; animation-delay: 0.8s; }
          &:nth-child(5) { left: 80%; width: 20%; animation-delay: 1.0s; }
        }
      }
      
      .waterbody-animation {
        width: 100%;
        height: 100%;
        
        .water-drop {
          position: absolute;
          width: 8px;
          height: 12px;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 50%;
          animation: drop 2s infinite;
          
          &:nth-child(1) { left: 20%; top: 0; animation-delay: 0.2s; }
          &:nth-child(2) { left: 40%; top: 0; animation-delay: 0.6s; }
          &:nth-child(3) { left: 60%; top: 0; animation-delay: 1.0s; }
          &:nth-child(4) { left: 30%; top: 0; animation-delay: 1.4s; }
          &:nth-child(5) { left: 70%; top: 0; animation-delay: 1.8s; }
        }
      }
      
      .collapse-animation {
        width: 100%;
        height: 100%;
        
        .crack {
          position: absolute;
          height: 4px;
          background: rgba(255, 255, 255, 0.4);
          transform-origin: left center;
          animation: crack 2.5s infinite;
          
          &:nth-child(1) { left: 10%; top: 30%; width: 80%; animation-delay: 0.2s; transform: rotate(5deg); }
          &:nth-child(2) { left: 20%; top: 50%; width: 60%; animation-delay: 0.6s; transform: rotate(-3deg); }
          &:nth-child(3) { left: 15%; top: 70%; width: 70%; animation-delay: 1.0s; transform: rotate(2deg); }
          &:nth-child(4) { left: 5%; top: 90%; width: 90%; animation-delay: 1.4s; transform: rotate(-1deg); }
        }
      }
      
      .frozing-animation {
        width: 100%;
        height: 100%;
        
        .snowflake {
          position: absolute;
          width: 8px;
          height: 8px;
          background: rgba(255, 255, 255, 0.7);
          border-radius: 50%;
          animation: snowfall 3s infinite;
          
          &:nth-child(1) { left: 10%; top: 0; animation-delay: 0.2s; }
          &:nth-child(2) { left: 30%; top: 0; animation-delay: 0.6s; }
          &:nth-child(3) { left: 50%; top: 0; animation-delay: 1.0s; }
          &:nth-child(4) { left: 70%; top: 0; animation-delay: 1.4s; }
          &:nth-child(5) { left: 90%; top: 0; animation-delay: 1.8s; }
          &:nth-child(6) { left: 20%; top: 0; animation-delay: 2.2s; }
        }
      }
    }
    
    .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);
      color: white;
      border: none;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      z-index: 3;
      
      &:hover {
        background: rgba(0, 0, 0, 0.4);
      }
    }
  }
  
  .disaster-image-container {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 200px;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }
    
    &::after {
      content: '点击查看大图';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
      
      &::before {
        content: '🔍';
        font-size: 16px;
      }
    }
    
    &:hover {
      &::before {
        opacity: 1;
      }
      
      &::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      
      .disaster-image {
        transform: scale(1.05);
      }
    }
    
    .disaster-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .disaster-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px 15px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      color: white;
      
      .disaster-date {
        font-size: 12px;
        margin-bottom: 5px;
        opacity: 0.9;
      }
      
      .disaster-location {
        font-size: 14px;
        display: flex;
        align-items: center;
        
        .el-icon {
          margin-right: 5px;
          font-size: 16px;
        }
        
        :deep(.el-icon) {
          width: 16px;
          height: 16px;
        }
        
        :deep(svg) {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  
  .disaster-details {
    padding: 15px;
    
    h3 {
      font-size: 16px;
      margin-bottom: 10px;
      color: #333;
    }
    
    .disaster-info {
      font-size: 14px;
      line-height: 1.5;
      color: #666;
      margin-bottom: 15px;
    }
    
    .disaster-metadata {
      background: #f5f5f5;
      border-radius: 6px;
      padding: 10px;
      
      .metadata-item {
        display: flex;
        margin-bottom: 8px;
        font-size: 14px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          width: 80px;
          color: #888;
        }
        
        .value {
          flex: 1;
          color: #333;
          
          &.status-verified {
            color: #67c23a;
          }
          
          &.status-unverified {
            color: #e6a23c;
          }
          
          &.status-false {
            color: #f56c6c;
          }
          
          &.status-handled {
            color: #409eff;
          }
        }
      }
    }
  }
}

// 动画关键帧
@keyframes rockfall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes drop {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  80% {
    transform: translateY(80px) scale(0.5);
    opacity: 0.3;
  }
  100% {
    transform: translateY(100px) scale(0);
    opacity: 0;
  }
}

@keyframes crack {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0.5;
  }
}

@keyframes snowfall {
  0% {
    transform: translateY(-20px) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(20px);
    opacity: 0;
  }
}

// 图片预览模态框样式
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.image-preview-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  cursor: default;
  transform: scale(0.9);
  animation: scaleIn 0.3s ease forwards;
}

@keyframes scaleIn {
  from { transform: scale(0.9); }
  to { transform: scale(1); }
}

.preview-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close-preview-btn {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
  }
}
</style>